<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>10 数据列表渲染</title>
    <style>
        h1 {
            text-align: center;
        }

        ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        #goodslist {
            padding: 20px;
        }

        #goodslist img {
            width: 200px;
        }

        #goodslist ul {
            overflow: hidden;
        }

        #goodslist li {
            float: left;
            border-right: 1px dotted #ddd;
            padding-right: 20px;
            margin-right: 20px;
        }

        .price span {
            color: #f00;
        }

        .price span::before {
            content: '￥';
        }
    </style>
</head>

<body>
    <h1>10 数据列表渲染</h1>
    <div id="goodslist">
        <ul id="list">
            <!-- <li data-guid="001">
                <img src="../img/honor7.jpg">
                <h4>苹果</h4>
                <p class="color">颜色：土豪金</p>
                <p class="price">原价：<del>77</del></p>
                <p class="price">现价：<span>66</span></p>
            </li> -->
        </ul>
    </div>
</body>
<script src="../common.js"></script>
<script>
    (function () {
        var data = [{//假数据：真数据是从数据库读出来的
            id: '001',
            name: 'iphone7 plugs',
            imgurl: '../img/ip7.jpg',
            price: 5899.00,
            sale: 5888.00,
            color: '土豪金'
        }, {
            id: '002',
            name: 'Note7',
            imgurl: '../img/note7.jpg',
            price: 3899.00,
            sale: 998.00,
            color: '黑色'
        }, {
            id: '003',
            name: '荣耀7',
            imgurl: '../img/honor7.jpg',
            price: 1999.00,
            sale: 1899.00,
            color: '白色'
        }, {
            id: '004',
            name: 'iphone7 plugs',
            imgurl: '../img/ip7.jpg',
            price: 5899.00,
            sale: 5888.00,
            color: '土豪金'
        }, {
            id: '005',
            name: 'Note7',
            imgurl: '../img/note7.jpg',
            price: 3899.00,
            sale: 998.00,
            color: '黑色'
        }, {
            id: '006',
            name: '荣耀7',
            imgurl: '../img/honor7.jpg',
            price: 1999.00,
            sale: 1899.00,
            color: '白色'
        }, {
            id: '007',
            name: 'iphone7 plugs',
            imgurl: '../img/ip7.jpg',
            price: 5899.00,
            sale: 5888.00,
            color: '土豪金'
        }, {
            id: '008',
            name: 'Note7',
            imgurl: '../img/note7.jpg',
            price: 3899.00,
            sale: 998.00,
            color: '黑色'
        }, {
            id: '009',
            name: '荣耀7',
            imgurl: '../img/honor7.jpg',
            price: 1999.00,
            sale: 1899.00,
            color: '白色'
        }, {
            id: '010',
            name: 'iphone7 plugs',
            imgurl: '../img/ip7.jpg',
            price: 5899.00,
            sale: 5888.00,
            color: '土豪金'
        }, {
            id: '011',
            name: 'Note7',
            imgurl: '../img/note7.jpg',
            price: 3899.00,
            sale: 998.00,
            color: '黑色'
        }, {
            id: '012',
            name: '荣耀7',
            imgurl: '../img/honor7.jpg',
            price: 1999.00,
            sale: 1899.00,
            color: '白色'
        }];

        console.log(data);

        // 将上面data的数据渲染到页面中
        var html = ''; // 用于拼接字符串

        for (var i = 0; i < data.length; i++) {
            html +=
                '<li data-guid="' + data[i].id + '">' +
                '<img src="' + data[i].imgurl + '">' +
                '<h4>' + data[i].name + '</h4>' +
                '<p class="color">颜色：' + data[i].color + '</p>' +
                '<p class="price">原价：<del>' + data[i].price + '</del></p>' +
                '<p class="price">现价：<span>' + data[i].sale + '</span></p>' +
                '</li>';
        }

        console.log(html);

        var list = getid('list');
        list.innerHTML = html; // 渲染数据到页面

    })();
</script>

</html>